<template>
  <view class="playing">
    <Works  v-if="playings" :id="item.id" :title="item.name" 
    :iamge="item.image" 
    :info="item.content" 
    :url="item.url"
    :deleteItem="deleteItem" 
    :inUser="false" :red="100" v-for="item in playings" :key="item.id" />
  </view>
  <AddPlaying ref="addPlaying" @getUserPlayList="getUserPlayList" />

</template>

<script setup lang="ts">
import dyUserPlayingService from "@/api/dyUserPlayingService";
import Works from "@/components/Works/Works.vue";
import AddPlaying from "./components/AddPlaying.vue";

const playings = ref()
const addPlaying= ref()

const deleteItem = async (id:string)=>{
  playings.value = playings.value.filter((item:any) => item.id !== id);
  await dyUserPlayingService.deleteUserPlayId({id:id})
  addPlaying.value.getList()
}
const getUserPlayList =async ()=>{
  const {success,result} = await dyUserPlayingService.getUserPlayList()
  if(success){
    playings.value = result
  }
}


onLoad( async()=>{
  getUserPlayList()
})


</script>

<style lang="scss" scoped>
.playing{
  padding: 20rpx;
}
</style>
